<template>
  <div class="app-container home boxShadow">
    <div class="collection-chart">
      <!-- 主体 -->
      <div id="myLeftCharts" style="width: 100%; height: 60vh; padding: 10px"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
     //@ts-ignore
  import echarts from '@/hooks/useEcharts'
  // import { getHomeStatistics } from '@/api/examine/indexEcharts/homePage'

  const echartsDateCome = ref()
  onMounted(async () => {
    init()
    window.addEventListener('resize', handleResize)
  })
  onBeforeMount(() => {
    getData()
  })
  const myChart = ref()
  const formDisplayStyle = {
    chart1: '项目整体完成情况',
    chart2: '完成项目数量/未完成项目数量',
    work: '未启用工作类型',
  }

  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize)
  })
  const handleResize = () => {
    myChart.value.resize()
  }
  const getData = async () => {}

  const init = async () => {
    // let [err, response] = await getHomeStatistics()
    // if (response.code == 200) {
    //   echartsDateCome.value = response.data
    // }
    var chartDom = document.getElementById('myLeftCharts')
    myChart.value = echarts.init(chartDom)
    var option

    option = {
      title: [
        {
          right: '80',
          text: formDisplayStyle.chart1,
          textStyle: {
            fontSize: 20, //字体大小
          },
        },
        {
          right: '60',
          text: formDisplayStyle.chart2,
          textStyle: {
            lineHeight: '100',
            fontSize: 16,
            color: '#a1a5ad',
          },
        },
      ],
      tooltip: {
        trigger: 'item',
        textStyle: {
          fontSize: 20,
        },
      },
      legend: {
        itemWidth: 18, // 设置图例图形的宽
        itemHeight: 12, // 设置图例图形的高
        textStyle: {
          color: '#666',
          fontSize: 20,
        },
        orient: 'vertical',
        x: 'left',
      },
      series: [
        {
          x: '0%',
          y: '-10%',
          type: 'pie',
          radius: '58%',
          data: echartsDateCome.value,
          itemStyle: {
            normal: {
              color: function (colors) {
                var colorList = ['#5470DE', '#51cf66', '#fac858']
                return colorList[colors.dataIndex]
              },
            },
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 20,
              },
            },
            emphasis: {
              show: true,
            },
          },
        },
      ],
    }

    option && myChart.value.setOption(option)
  }
</script>

<style lang="scss" scoped>
  .boxShadow {
    border: 1px solid #e6ebf5;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(87, 87, 87, 0.2);
  }

  .collection-chart {
    background-color: #fff;
  }
</style>
